<script>

import { mapState, mapMutations } from 'vuex';
import { touchRipple as TouchRipple } from 'vue-touch-ripple'
import vuex_store from '../store';

export default {
    name: 'List',
    store: vuex_store, //应用vuex状态机
    computed: {
        ...mapState({
            componentsData: state => state.componentsData,
            keyword: state => state.keyword,
        }),
        filteredList() {
            return this.componentsData.filter(obj =>
                obj.name.indexOf(this.keyword) >= 0 || obj.desc.indexOf(this.keyword) >= 0
            );
        }
    },
    methods: {
        handleClick: url => setTimeout(() => window.open(url, "_blank"), 500)
    },
    components: { TouchRipple }
}
</script>

<!-- scoped 可以限制作用域 -->
<style scoped>

@media screen and (max-width: 710px){
    .list {
        margin: 0 auto;
        background: #eee;
        width: 100%;
        min-width: 320px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3)
    }
}
@media screen and (min-width: 710px){
    .list {
        margin: 0 auto;
        background: #eee;
        width: 710px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3)
    }
}


.list-item {
    background: #fff;
    margin: 1px;
    cursor: pointer;
    padding: 10px;
}

.list-item:hover {
    background-color: #fafafa;
}

.desc {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

.logo {
    background-color: #fff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #41B883;
    font-size: 20px;
    font-weight: bold;
}

.logo>img {
    height: 50px;
    vertical-align: middle;
}

.info {
    text-align: right;
    padding: 0 10px;
    background-color: #fff;
    color: #aaa;
}
</style>

<template>
    <div class="list">
        <div class="logo">
            <img src="../assets/logo.png" alt=""> VueJS开源项目汇总（当前结果：{{filteredList.length}}条）
        </div>
        <div class="info">
            code by wolfx, thanks for
            <a target="_blank" href="https://github.com/opendigg/awesome-github-vue/blob/master/README.md">opendigg</a>
        </div>
        <div :key="index" v-for="(obj,index) in filteredList" @click="handleClick(obj.url)">
            <TouchRipple class="list-item">
                <div>{{obj.name}}</div>
                <div class="desc">{{obj.desc}}</div>
            </TouchRipple>
        </div>
    
    </div>
</template>
